<template>
  <div id="path-analysis">
    <v-header ref="vHeader" title="路径分析" @on-save="save" :showDownloadBtn="false"></v-header>
    <div class="box" style="height: calc(100% - 56px); padding: 10px 0 10px 10px;">
      <div style="height: 100%; overflow: auto;">
        <div style="padding-right: 10px">
          <div class="query-conditions">
            <div class="common-conditions">
              <div class="tags">
                <!------常用------>
                <v-pageHeader ref="pageHeader" :InquireTransCode="InquireTransCode" @on-click="showList" :setTransCode="setTransCode" :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"  num="04"></v-pageHeader>
              </div>
            </div>
            <!------用户分群------>
            <!--<div class="conditions">
              <span class="font12">用户分群</span>
              <el-select class="width160" placeholder="请选择" v-model="userGroup">
                <el-option
                  v-for="item in groupList"
                  :key="item.group_id"
                  :label="item.group_name"
                  :value="item.group_id">
                </el-option>
              </el-select>
            </div>-->

            <div class="time-screening">
              <!--------事件开始-------->
              <div class="conversation">
                <el-select size="mini" class="width160" placeholder="事件" v-model="startSession" filterable>
                  <el-option
                    v-for="item in event_list"
                    :key="item.event_id"
                    :label="item.event_name"
                    :value="item.event_id">
                  </el-option>
                </el-select>
                <span class="mr2">的</span>
                <el-select size="mini" class="width160" placeholder="来源" v-model="endSession" filterable>
                  <el-option
                    v-for="item in event_lists"
                    :key="item.code_value"
                    :label="item.code_value_nm_cns"
                    :value="item.code_value">
                  </el-option>
                </el-select>
                <div style="float: right">
                  <el-radio v-model="radio" label="MG00001">次数</el-radio>
                  <el-radio v-model="radio" label="MG00002">人数</el-radio>
                  <div class="btns rf">
                    <el-button type="primary" size="mini" class="sure-btn" @click="sureEven">查看</el-button>
                    <el-button size="mini" class="" @click="cancelEven">重置</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="f-chart">
              <range-date-picker class="displaybox" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
              <!-- <el-date-picker
                size="mini"
                  class="timewidth210 height30"
                  v-model="dates"
                  type="daterange"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="getDate"
                  :picker-options="disableDate"
              >
              </el-date-picker> -->
              <div class="btns rf" v-if="options.series[0].data.length > 0">
                <el-button size="mini" @click="expansionTree('null')">全部展开</el-button>
                <el-button size="mini" @click="expansionTree(1)">全部收缩</el-button>
                <el-button size="mini" @click="expansionTree(options.series[0].initialTreeDepth + 1)">展开下一层</el-button>
              </div>
              <!--echarts 图形容器-->
              <div id="main" class="canvas"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {VHeader, VPageHeader, RangeDatePicker} from '../../../../components'
  import {
    SELECTBAARCHANALLIST,
    SETTINGBAARCHANALFORTOP,
    DELETEBAARCHANAL,
    SELECTUSERGROUPLIST,
    ANALYSESEARCHOBJECT,
    SAVEASCOMMON,
    SELECTBAARCHANAL
  } from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import {getDateTime, dateFormat} from '../../../../assets/js'
  import echarts from 'echarts'
  import Msg from '../../../../assets/js/msg'

  export default{
    data () {
      return {
        InquireTransCode: SELECTBAARCHANALLIST, // 查询
        setTransCode: SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: DELETEBAARCHANAL, // 删除常用
        radio: 'MG00001', // 人数 次数
        analyse_type: '04',
        dates: [], // 时间
        groupList: [], // 用户分群列表
        userGroup: '', // 用户分群的值
        event_list: [], // 事件开始
        event_lists: [], // 事件结束
        startSession: '', // 事件开始的值
        endSession: '', // 事件结束的值
        from_date: '', // 开始时间
        to_date: '', // 结束时间
        options: { // echarts 配置项
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              // 数据源
              data: [],
              left: '2%',
              right: '2%',
              top: '8%',
              bottom: '20%',
              symbol: 'emptyCircle',
              orient: 'vertical',
              expandAndCollapse: true,
              initialTreeDepth: 2,
              label: {
                normal: {
                  position: 'top',
                  rotate: 0,
                  verticalAlign: 'middle',
                  align: 'center',
                  fontSize: 14
                }
              },
              leaves: {
                label: {
                  normal: {
                    position: 'top',
                    rotate: 0,
                    verticalAlign: 'middle',
                    align: 'center'
                  }
                }
              },
              animationDurationUpdate: 950
            }
          ]
        },
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    methods: {
      // 点击控制树节点展开收缩
      expansionTree (num) {
        this.options.series[0].initialTreeDepth = num
        this.sureEven()
      },
      save (obj) { // 点击保存为常用
        if (!this.startSession) {
          Msg.alert('请选择事件')
          return
        } else if (!this.endSession) {
          Msg.alert('请选择来源')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          user_group: this.userGroup,
          from_date: this.from_date,
          to_date: this.to_date,
          event_id: this.startSession,
          path_type: this.endSession,
          count_type: this.radio,
          analyse_type: this.analyse_type
        }
        // 调用 保存为常用接口
        ajax.post(SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, { anal_type: this.analyse_type }).then(res => {
            this.$refs.pageHeader.getList(res.data)
            this.$refs.vHeader.reset()
          })
        })
      },
      // 获取日期
      getDate (list) {
        if (list) {
          this.from_date = getDateTime(list[0], 's')
          this.to_date = getDateTime(list[1], 's')
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      },
      // 确定点击事件
      sureEven () {
        let paramsData = {
          user_group: this.userGroup,
          event_id: this.startSession,
          path_type: this.endSession,
          from_date: this.from_date,
          to_date: this.to_date,
          count_type: this.radio,
          analyse_type: this.analyse_type
        }
        if (!this.startSession) {
          Msg.alert('请选择事件')
          return
        } else if (!this.endSession) {
          Msg.alert('请选择来源')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 调用接口 显示echarts 分析图
        ajax.post(ANALYSESEARCHOBJECT,
          paramsData
        ).then(res => {
          let myChart = echarts.init(document.getElementById('main'))
          myChart.clear() // 清空缓存
          if (res.data.rows.length > 0) {
            this.options.series[0].data = res.data.rows
          } else {
            Msg.alert('没有查找到数据')
            return
          }
          // 把数据渲染到div中
          myChart.setOption(this.options, true)
        })
      },
      cancelEven () { // 重置
        this.userGroup = '' // 用户分群
        this.startSession = '' // 事件的值
        this.endSession = '' // 来源的值
        this.radio = 'MG00001' // 人数次数
        this.dates = [] // 时间
        echarts.init(document.getElementById('main')).clear()
      },
      // 点击常用
      showList (obj) {
        ajax.post(SELECTBAARCHANAL,
          {
            anal_id: obj.anal_id
          }
        ).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          // this.userGroup = data.user_group // 用户分群
          this.userGroup = data.user_group
          this.startSession = data.event_id
          this.endSession = data.path_type
          this.radio = data.count_type
          // 添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          let dateArr = [dateFormat(this.from_date), dateFormat(this.to_date)]
          dateArr.forEach((item, index) => {
            this.dates.splice(index, 1, item)
          })
        })
      }
    },
    created () {
      this.dates = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      // 用户分群列表
      ajax.post(SELECTUSERGROUPLIST).then(res => {
        this.groupList = res.data
      })
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.event_list = this.data.B020002
      this.event_lists = this.data.B010017
    },
    components: {
      VHeader,
      VPageHeader,
      RangeDatePicker
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #path-analysis
    height: 100%
    .mr2
      font-size: 14px
      margin: 0 12px 0 2px
    .tags > span
      font-size: 12px
      color: #5a5e66
      padding: 6px 7px
      border: 1px solid #d8dce5
      border-radius: 4px
      margin-right: 15px
    .common-conditions, .conditions, .conversation
      height: 50px
      line-height: 50px
      padding: 0 20px
      background-color #fff
    .time-screening
      background-color #fff
    .conditions > .font12
      display: inline-block
      width: 80px
    .f-chart
      margin-top 10px
      background-color #fff
      padding: 10px 0px 20px 20px
      & > div
        margin: 20px 0
      .btns
        margin-right 20%
    .sure-btn
      margin-left 20px
    .canvas
      width: 1060px
      height: 500px
  .displaybox
    display inline-block
</style>
